// 尝试发送请求，获取统计数据
axios.get('/dashboard').then(({data:res}) => {
  // console.log(res);
  // 解构方案一：
  // let { message , data: {groupData,overview}} = res;
  // console.log(overview);
  // 解构方案二：
  let {groupData, overview, provinceData, salaryData, year} = res.data;
  // console.log(overview)
  for(let key in overview) {
    document.querySelector(`[name=${key}]`).innerHTML = overview[key]
  }


  lineChart(year);  //折线图
  classSalaryChart(salaryData);  // 饼状图
  groupSalaryChart(groupData);   //柱状图
  genderSalaryChart(salaryData);  //饼状图
  mapChart(provinceData);  //地图

})



// --------------------- 折线图：全学科薪资走势 -----------------------------
// 1. 得有盒子（页面布局已经有了  id="line"）
// 2. 引入echart.min.js（已经引入了）
function lineChart(data) {
  // let symbolPoint = {
  //   value: 15000,
  //   symbolSize: 20,
  //   symbol: 'path://M530.0736 830.1056c-23.6032 0-38.3488-9.7792-46.6432-18.176-20.7872-21.0944-21.1968-52.2752-20.992-59.2896l-4.9152-117.76-157.8496 84.736a41.66656 41.66656 0 0 1-52.2752-10.7008l-147.2512-184.32a41.50784 41.50784 0 0 1-1.8944-49.4592 41.53856 41.53856 0 0 1 46.6944-16.4352l175.5136 53.9136a1.024 1.024 0 0 0 0.6656-0.1024l344.832-248.3712c8.5504-6.1952 120.4224-83.5584 253.7472 4.864a41.92768 41.92768 0 0 1 18.7392 33.9456 41.66144 41.66144 0 0 1-16.9984 34.5088c-45.312 33.28-86.9888 62.4128-125.2352 88.8832a20.48 20.48 0 0 1-28.5184-5.1712 20.48 20.48 0 0 1 5.1712-28.5184c37.9904-26.3168 79.36-55.2448 124.3136-88.2176 0.1536-0.1024 0.256-0.2048 0.256-0.5632 0-0.4608-0.3072-0.6656-0.4608-0.768-113.92-75.5712-205.7216-6.8608-206.6432-6.144l-0.512 0.4096-344.832 248.3712a41.9584 41.9584 0 0 1-36.608 6.0416L132.9152 497.8176c-0.4096 0.1024-1.024 0.5632-1.024 0.8192l147.5072 184.6784c0.2048 0.256 0.6144 0.3584 0.9216 0.2048l172.544-92.6208c11.52-6.1952 25.344-4.608 35.2256 4.0448 8.4992 7.4752 12.1856 18.5856 9.984 29.3888L503.3984 752.64l-0.0512 0.9728c-0.2048 5.3248 1.0752 21.4016 9.3184 29.6448 1.5872 1.5872 6.2976 6.4 19.2 5.888 37.376-1.4336 59.392-62.208 59.5968-62.8224l0.4096-1.0752 114.3808-282.4704a20.48 20.48 0 0 1 26.6752-11.3152 20.48 20.48 0 0 1 11.3152 26.6752l-114.2272 282.0096c-3.0208 8.5504-32.6656 87.4496-96.5632 89.9072-1.1776 0-2.304 0.0512-3.3792 0.0512z,M337.0496 454.7584c-3.9424 0-7.9872-1.1264-11.52-3.5328L258.048 405.248c-18.176-12.9536-25.9072-35.84-19.6096-57.2416 8.3456-28.16 37.8368-46.0288 78.848-47.7696l197.632-9.4208c11.1104-0.6656 20.8896 8.192 21.4528 19.456 0.5632 11.3152-8.192 20.8896-19.456 21.4528l-197.7344 9.4208c-26.88 1.1264-39.0144 10.2912-41.4208 18.4832-1.3824 4.608 0.1536 9.4208 3.7376 11.9808l67.1744 45.7216a20.49024 20.49024 0 0 1 5.4272 28.4672 20.77184 20.77184 0 0 1-17.0496 8.96z'
  // }
  // 3. 初始化echarts
  let myChart = echarts.init(document.querySelector('#line'))
  // 4. 配置项
  let option = {
    // 标题配置
    title: {
      text: '2022全学科薪资走势', // 标题文本
      // 颜色、文字大小
      textStyle: {
        // color: '',
        fontSize: 16
      },
      // 位置
      left: 10,
      top: 15
    },
    xAxis: {
      type: 'category',
      // data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      data: data.map(item => item.month),
      // x轴上的文字
      axisLabel: {
        color: '#999'
      },
      // 轴线
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      // y轴分割线
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    // 鼠标移入提示
    tooltip: {
      trigger: 'axis' // 鼠标移入轴线所在区域，即可提示
    },
    // 网格
    grid: {
      top: '20%'
    },
    // 颜色
    // color: ['颜色1', '颜色2'],
    color: {
      type: 'linear', // 渐变的类型，此处表示线性渐变
      x: 0, // 坐标，
      y: 0,
      x2: 0,
      y2: 1,
      colorStops: [
        {
          offset: 0, color: '#499FEE' // 0% 处的颜色
        },
        {
          offset: 1, color: '#5D75F0' // 100% 处的颜色
        }
      ],
      global: false // 缺省为 false
    },
    series: [
      {
        // data: [9000, 12000, 15000, 13000, 10000, 18000, 14000, 10000, 12000, 13000, 15000, 19000],
        data: data.map(item => item.salary),
        type: 'line',
        smooth: true, // 平滑曲线
        // 线条样式
        lineStyle: {
          width: 6
        },
        // 线条上的标记的大小
        symbolSize: 10,
        // 区域样式
        areaStyle: {
          color: {
            type: 'linear', // 渐变的类型，此处表示线性渐变
            x: 0, // 坐标，
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0, color: '#499FEE' // 0% 处的颜色
              },
              {
                offset: 0.8, color: 'rgba(255, 255, 255, 0.2)' // 80% 处的颜色
              },
              {
                offset: 1, color: 'rgba(255, 255, 255, 0)' // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        }
      }
    ]
  }
  // 5. 创建图表
  myChart.setOption(option) // 第1个 O 大写
}




// --------------------- 饼图：班级薪资分布（右上角） -----------------------------
function classSalaryChart(data) {
  // console.log(data)
  let myChart = echarts.init(document.querySelector('#salary'))
  let option = {
    // 标题配置
    title: {
      text: '班级薪资分布', // 标题文本
      // 颜色、文字大小
      textStyle: {
        // color: '',
        fontSize: 16
      },
      // 位置
      left: 10,
      top: 15
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'item'
    },
    // 图例
    legend: {
      bottom: '6%',
      left: 'center'
    },
    // 颜色
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '班级薪资分布',
        type: 'pie', // 表示饼图
        center: ['50%', '50%'], // 中心点坐标
        radius: ['50%', '64%'], // 内外圈的半径
        // avoidLabelOverlap: false,
        // 每个扇形区域样式
        itemStyle: {
          borderRadius: 10, // 圆角
          borderColor: '#fff', // 边框颜色
          borderWidth: 2 // 边框大小
        },
        label: {
          show: false, // 每个扇形的描述文字，不显示
          // position: 'center'
        },
        // emphasis: {
        //   label: {
        //     show: true,
        //     fontSize: '40',
        //     fontWeight: 'bold'
        //   }
        // },
        labelLine: {
          show: false // 标签文字引导线，不需要
        },
        // data: [
        //   { value: 450, name: '1万以下' },
        //   { value: 735, name: '1-1.5万' },
        //   { value: 580, name: '1.5-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        })
      }
    ]
  }
  myChart.setOption(option)
}





// --------------------- 柱状图：xxxxx -----------------------------------
function groupSalaryChart(data) {
  let myChart = echarts.init(document.querySelector('#lines'));
  let option = {
    grid: {
      left: 70,
      top: 30,
      right: 30,
      bottom: 50
    },
    xAxis: {
      type: 'category',
      // data: ['张三', '李四', '赵云', '张飞', '马超', '黄忠', '亚索', '盲僧'],
      data: data[1].map(item => item.name),
      axisLabel: {
        color: '#999'
      },
      // 轴线
      axisLine: {
        lineStyle: {
          color: '#ccc',
          type: 'dashed'
        }
      }
    },
    yAxis: {
      type: 'value',
      // y轴分割线
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      }
    },
    tooltip: {},
    series: [
      {
        // data: [12200, 17932, 13901, 13934, 21290, 23300, 13300, 13320],
        data: data[1].map(item => item.hope_salary),
        type: 'bar',
        name: '期望薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      },
      {
        // data: [22820, 19932, 16901, 15934, 31290, 13300, 14300, 18320],
        data: data[1].map(item => item.salary),
        type: 'bar',
        name: '就业薪资' // 这个数据的名字，可以在鼠标移入的提示上显示
      }
    ],
    color: [
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#34D39A' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(52,211,154,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      },
      {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [{
            offset: 0, color: '#499FEE' // 0% 处的颜色
        }, {
            offset: 1, color: 'rgba(73,159,238,0.2)' // 100% 处的颜色
        }],
        global: false // 缺省为 false
      }
    ]
  };
  myChart.setOption(option);

  document.querySelector('#btns').addEventListener('click',function(e){
    if(e.target.tagName === 'BUTTON' ) {
      // 说明点击了某个按钮
      let i = e.target.innerHTML;
      // console.log(i)  //组号
      // 排他思想 处理效果
      document.querySelector('#btns .btn-blue').classList.remove('btn-blue');
      e.target.classList.add('btn-blue');
      // 更换图表中的数据（点击的是第几组，图表中应该展示该组数据）
      option.xAxis.data = data[i].map(item => item.name);
      option.series[0].data = data[i].map(item => item.hope_salary);
      option.series[1].data = data[i].map(item => item.salary);
      // 修改了配置项后，重新创建图表即可
      myChart.setOption(option);

    }
  })
};



// --------------------- 饼图：xxxxx（左下角） -----------------------------
function genderSalaryChart(data) {
  let myChart = echarts.init(document.querySelector('#gender'))
  let option = {
    // 标题配置
    title: [
      {
        text: '男女薪资分布', // 标题文本
      // 颜色、文字大小
        textStyle: {
        // color: '',
        fontSize: 16
        },
      // 位置
        left: 10,
        top: 10
      },
      {
        text: '男生', // 标题文本
      // 颜色、文字大小
        textStyle: {
        // color: '',
        fontSize: 12
        },
      // 位置
        left: '45%',
        top: '45%'
      },
      {
        text: '女生', // 标题文本
      // 颜色、文字大小
        textStyle: {
        // color: '',
        fontSize: 12
        },
      // 位置
        left: '45%',
        top: '85%'
      },
    ],
    // 鼠标移入的提示
    tooltip: {
      trigger: 'item'
    },
    // 颜色
    color: ['#FDA224', '#5097FF', '#3ABCFA', '#34D39A'],
    series: [
      {
        name: '男生薪资分布',
        type: 'pie', // 表示饼图
        center: ['50%', '30%'], // 中心点坐标
        radius: ['20%', '30%'], // 内外圈的半径
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => {
          return {
            name: item.label,
            value: item.b_count
          }
          
        })
      },
      {
        name: '女生薪资分布',
        type: 'pie', // 表示饼图
        center: ['50%', '70%'], // 中心点坐标
        radius: ['20%', '30%'], // 内外圈的半径
        // data: [
        //   { value: 1048, name: '1万以下' },
        //   { value: 235, name: '1万-2万' },
        //   { value: 580, name: '1.5万-2万' },
        //   { value: 484, name: '2万以上' }
        // ]
        data: data.map(item => ({
          name: item.label,
          value: item.g_count
        }))
      }
    ]
  }
  myChart.setOption(option)
}



// --------------------- 地图：籍贯分布 ---------------------------------
function mapChart(data) {
  let myChart = echarts.init(document.querySelector('#map'))

  const mapData = [
    { name: '南海诸岛', value: 0 },
    { name: '北京', value: 0 },
    { name: '天津', value: 0 },
    { name: '上海', value: 0 },
    { name: '重庆', value: 0 },
    { name: '河北', value: 0 },
    { name: '河南', value: 0 },
    { name: '云南', value: 0 },
    { name: '辽宁', value: 0 },
    { name: '黑龙江', value: 0 },
    { name: '湖南', value: 0 },
    { name: '安徽', value: 0 },
    { name: '山东', value: 0 },
    { name: '新疆', value: 0 },
    { name: '江苏', value: 0 },
    { name: '浙江', value: 0 },
    { name: '江西', value: 0 },
    { name: '湖北', value: 0 },
    { name: '广西', value: 0 },
    { name: '甘肃', value: 0 },
    { name: '山西', value: 0 },
    { name: '内蒙古', value: 0 },
    { name: '陕西', value: 0 },
    { name: '吉林', value: 0 },
    { name: '福建', value: 0 },
    { name: '贵州', value: 0 },
    { name: '广东', value: 0 },
    { name: '青海', value: 0 },
    { name: '西藏', value: 0 },
    { name: '四川', value: 0 },
    { name: '宁夏', value: 0 },
    { name: '海南', value: 0 },
    { name: '台湾', value: 0 },
    { name: '香港', value: 0 },
    { name: '澳门', value: 0 }
  ]

  mapData.forEach(item => {
    let res = data.find(v => {
      return v.name.includes(item.name)
    })
    if(res) {
      item.value = res.value
    }
  })




  let option = {
    // 视觉映射组件
    visualMap: {
      type: 'continuous', // continuous表示连续型； piecewise表示分段式
      min: 0,
      max: 20, // 看每个地区的学员多少，再来决定
      inRange: {
        color: ['#fff', '#0075F0']
      },
      text: [20, 0], // 两端的文字
      left: 40,
      bottom: 20
    },
    // 标题配置
    title: {
      text: '籍贯分布',
      top: 15,
      left: 10,
      textStyle: {
        fontSize: 16
      }
    },
    // 肯定需要配置的有：series
    series: [
      {
        name: '籍贯分布', // 添加系列数据的名字（和鼠标移入的提示有关系）
        type: 'map',
        map: 'china', // 具体是什么地图
        // 显示文本标签（每个区域、每个省的名字）
        label: {
          show: true,
          color: 'rgba(0, 0, 0, 0.7)',
          fontSize: 10
        },
        // 每个区域（省）【默认】的样式
        itemStyle: {
          areaColor: '#E0FFFF',
          borderColor: 'rgba(0, 0, 0, 0.2)'
        },
        // 高亮状态，每个区域的配置
        emphasis: {
          // 高亮状态下（鼠标移入状态，或者选中状态下）
          itemStyle: {
            areaColor: '#34D39A',
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 每个区域的数据
        data: mapData
      }
    ],
    // 鼠标移入的提示
    tooltip: {
      formatter: '{b}:{c}位学员', // {a}是series里面大的name；{b}表示每个区域的名字(省的名字)；{c}表示该地区的值
      backgroundColor: 'rgba(0, 0, 0, 0.5)',
      borderColor: 'transparent',
      textStyle: {
        color: '#fff'
      }
    }
  }
  myChart.setOption(option)
}
